<template>
	<view class="girls-room-list">
		<view class="top-box"></view>
		<view class="center-active-scroll">
			<scroll-view ref="scrollView" scroll-y class="active-scroll-content" :show-scrollbar="false"
				:scroll-with-animation="true">
				<view class="active-list">
					<view class="active-item-content" :style="{height:itemHeight+'rpx'}"
						@click="handleRoomItemClick(index,item)" v-for="(item,index) in roomList" :key="index">
						<image class="active-image" :src="item.image" mode="aspectFill"></image>
						<view class="label-content">{{item.level}}</view>
						<!-- <view class="enter-btn" v-if="!item.locked">进入</view> -->
						<view class="locked-masker" v-if="item.locked">
							<!-- 		<image class="masker-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
								mode=""></image>
							<view class="tip-text">心动值大于30可解锁</view> -->

							<view class="locked-tip-box">
								<image class="locked-icon"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
									mode=""></image>
								<view class="locked-tip-text">等级大于Lv.30可解锁</view>

							</view>
						</view>
						<view class="name-heart-box">
							<view class="name-text">{{item.name}}</view>
							<view class="heart-icon">
								<image class="icon-image"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c49ae88f2c0340bebc08d0690b1115b4.png"
									mode="aspectFill"></image>

								<view class="heart-number">{{item.heart}}</view>
							</view>

						</view>

					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemHeight: 250,
				roomList: [{
						level: "Lv.10",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/734cc7f6df37424cb6f9fd2394cfa68f.png",
						locked: false,
						storyId: "S016KGO",
						name: "云琪",
						heart: 99
					},
					{
						level: "Lv.5",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e2116b616b174d92be3536c1d9467897.png",
						locked: false,
						storyId: "S036BJO",
						name: "米娜",
						heart: 31
					},
					{
						level: "Lv.20",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5b219a7d502a46e6af6ff7d4858da8e6.png",
						locked: false,
						storyId: "S037DEP",
						name: "妙陈",
						heart: 40

					},
					{
						level: "Lv.1",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1c51f13f2c694d0e8d28a8b33a369de6.png",
						locked: true,
						storyId: "S016KGO",
						name: "可灵",
						heart: 8
					},
					{
						level: "Lv.1",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5e22249cb135464ca06c0705de660237.png",
						locked: true,
						storyId: "S016KGO",
						name: "香奈",
						heart: 10
					},
					{
						level: "Lv.1",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7ac4c3a5cd7d406998a8310965f038fe.png",
						locked: true,
						storyId: "S016KGO",
						name: "咏美",
						heart: 10
					},
					{
						level: "Lv.1",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dca036fa5b2d40cf872cd7dbab8731b1.png",
						locked: true,
						storyId: "S016KGO",
						name: "舒淇",
						heart: 10
					},
					{
						level: "Lv.1",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/da4b504bbdc740d9881597e6345e9f2d.png",
						locked: true,
						storyId: "S016KGO",
						name: "结衣",
						heart: 10
					},
				],
			}
		},
		mounted() {
			// let screenWidth = uni.getSystemInfoSync().screenWidth
			// let width = (screenWidth * 750) / screenWidth;
			// this.itemHeight = width / 2.35

		},
		methods: {

			handleRoomItemClick(index, item) {
				console.log("舞姬列表被点击");
				if (!item.locked) {
					if (item.storyId) {
						this.$emit("getGameResult", item.storyId)
					}

				} else {}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.girls-room-list {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b4cc8a3ca154d5b9ba774c17583f480.jpg") no-repeat;
		background-size: cover;
		background-position: center center;
		z-index: 1;


		.top-box {
			width: 100vw;
			height: 200rpx;
			pointer-events: none;

		}

		.center-active-scroll {
			flex: 1;
			width: 100vw;
			// background-color: #fff;
			overflow: hidden;


			.active-scroll-content {
				width: 100%;
				height: 100%;

				// overflow: hidden;
				.active-list {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					flex-wrap: wrap;
					box-sizing: border-box;


					.active-item-content {
						position: relative;
						width: 100%;
						height: 220rpx;
						margin-bottom: 30rpx;
						box-sizing: border-box;
						overflow: hidden;
						box-shadow: 0rpx 0rpx 10rpx #fff;


						.active-image {

							width: 100%;
							height: 100%;
							object-fit: cover;
						}



					}


				}

			}


		}

		.center-active-scroll {
			.active-scroll-content {
				.active-list {
					padding: 0rpx 20rpx;

					.active-item-content {
						position: relative;
						margin-bottom: 20rpx;
						box-sizing: border-box;
						box-shadow: none;
						border-top: 5rpx solid #777a86;
						height: 250rpx;
						box-shadow: 0rpx 0rpx 8rpx #fff;

						.active-image {
							position: absolute;
							z-index: 1;
						}

						.label-content {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 20%;
							height: 35rpx;
							background-image: linear-gradient(to right, rgba(0, 0, 0, .6)60%, rgba(0, 0, 0, 0)100%);
							z-index: 2;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 18rpx;
							line-height: 35rpx;
							color: #fff;
							padding-left: 10rpx;
						}

						.enter-btn {
							position: absolute;
							right: 20rpx;
							bottom: 25rpx;
							width: 180rpx;
							height: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-image: linear-gradient(to right, #fcf9d8, #f7d782);
							font-size: 30rpx;
							color: #572c0d;
							font-weight: 700;
							border-radius: 10rpx;
							z-index: 2;
							box-shadow: 0 0 10rpx #fadd8c;
						}

						.name-heart-box {
							position: absolute;
							right: 0rpx;
							bottom: 30rpx;
							width: 250rpx;
							height: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
							font-size: 30rpx;
							color: #000;
							font-weight: 700;
							z-index: 2;
							clip-path: polygon(4% 0%, 100% 0%, 100% 100%, 0% 100%);
							display: flex;
							justify-content: flex-end;
							align-items: center;

							.name-text {
								flex: 1;
								height: 100%;
								font-size: 30rpx;
								font-weight: 700;
								text-align: right;
								line-height: 50rpx;
								margin-right: 8rpx;
								// font-style: italic;
								letter-spacing: 5rpx;
							}

							.heart-icon {
								position: relative;
								width: 50rpx;
								height: 50rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-right: 15rpx;

								.icon-image {

									width: 40rpx;
									height: 40rpx;
								}

								.heart-number {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 16rpx;
									color: #fff;
									line-height: 50rpx;
									text-align: center;
									font-weight: 400;
								}

							}
						}

						.locked-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, .6);
							z-index: 3;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.locked-tip-box {
								position: absolute;
								left: 0rpx;
								bottom: 10rpx;
								width: 100%;
								height: 50rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.locked-icon {
									width: 35rpx;
									height: 35rpx;
									object-fit: cover;
									margin-left: 10rpx;
									margin-right: 10rpx;
								}

								.locked-tip-text {
									// width: 100%;
									flex: 1;
									height: 30rpx;
									font-size: 20rpx;
									line-height: 30rpx;
									color: #fff;
									text-align: left;
								}


							}

							.masker-img {
								width: 50rpx;
								height: 50rpx;
								object-fit: cover;
							}

							.tip-text {
								width: 100%;
								height: 30rpx;
								font-size: 20rpx;
								line-height: 30rpx;
								color: #fff;
								text-align: center;
								margin-top: 10rpx;
							}

						}
					}
				}
			}

		}
	}
</style>